<template>
  <div class="category">
    <el-row class="category-item" type="flex">
      {{ index }}
      <template v-for="(item, index) in list">
        <span
          class="item"
          :key="'all' + index"
          v-if="index == 0"
          @click="handleAll(index)"
          :class="[item.pid == currentActive ? 'active' : '']"
          >全部</span
        >
      </template>
      <span
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="handleChange(index)"
        :class="[item.id == currentActive ? 'active' : '']"
        >{{ item.title }}</span
      >
    </el-row>
    <template v-if="active > -1 && list[active].child">
      <edu-category :list="list[active].child" :active="active" v-on:patch="onPatch"></edu-category>
    </template>
  </div>
</template>
<script>
export default {
  name: 'eduCategory',
  props: ['list'],
  components: {},
  data() {
    return {
      active: -1,
      category: 0,
      category_id: this.$route.query.category
    }
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.category_id = this.$route.query.category
      }
    }
  },
  computed: {
    currentActive() {
      return this.category_id
    }
  },
  methods: {
    handleChange(index) {
      this.active = index
      if (this.active > -1) {
        this.category = this.list[this.active].id
        this.$emit('patch', this.list[this.active].id)
      } else {
        this.category = 0
        this.$emit('patch', 0)
      }
    },
    handleAll(index) {
      this.active = index
      if (this.active > -1) {
        this.category = this.list[this.active].pid
        this.$emit('patch', this.list[this.active].pid)
      } else {
        this.category = 0
        this.$emit('patch', 0)
      }
    },
    onPatch(id) {
      this.category = id
      this.$emit('patch', id)
    }
  }
}
</script>
<style lang="scss" scoped>
.category {
  .category {
    .category {
      padding-left: 60px;
    }
    .item {
      color: #7d7d7d;
    }
  }
  .category-item {
    flex-wrap: wrap;
  }
  .item {
    margin-bottom: 20px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: $text-color-import;
    padding: 6px 11px;
    cursor: pointer;
    &:hover {
      @include edu-color-auxiliary;
    }
    &.active {
      @include edu-color-auxiliary;
      background: #f7f7f7;
      border-radius: 13px;
    }
  }
}
</style>
